<template>
  <div id="center">
    <div class="bg-color-black">
        <div class="d-flex pt-2 pl-2">
          <span style="margin-top:10px">
            <icon name="chart-pie" class="text-icon"></icon>
          </span>
          <div class="d-flex">
            <span class="fs-xl text mx-2" style="font-size:30px;margin-top:7px;margin-bottom: 15px;">整经运行情况</span>
            <!--<dv-decoration-1 class="dv-dec-1"/>-->
          </div>
        </div>

        <div>
          <div style="float: left"><span style="font-size:25px;margin-left:20px;">1号机</span> </div>

<!--          <li class="ml-3 colorBlue fw-b fs-xl" style="margin-left: 20px;font-size: 20px;margin-top:10px;color: #1a5cd7">品种</li>-->
          <div style="float: left"><li class="text"
              style="float:left;text-align:left;margin-left:15px;height:45px;margin-top:10px;overflow:hidden;font-size:22px;color:aquamarine">
            {{this.curMachine.warpingProduct1}}</li></div>

          <div class="up">
            <div
              class="bg-color-black item"
              v-for="item in titleItem"
              :key="item.title"
            >
              <p class="ml-3 colorBlue fw-b fs-xl" style="font-size: 25px">{{ item.title }}</p>

              <div>
                <dv-digital-flop
                  class="dv-dig-flop ml-1 mt-2 pl-3"
                  :config="item.number"
                />
              </div>
            </div>
        </div>


      </div>

      <div>
        <div style="float:left">
        <span style="font-size:25px;margin-left:20px; ">2号机</span>
        </div>
        <div style="float:left">
<!--        <li class="ml-3 colorBlue fw-b fs-xl" style="margin-left: 20px;font-size: 20px;margin-top:10px;color: #1a5cd7">品种</li>-->
        <li class="text" style="float:left;text-align:left;margin-left:15px;height:45px;margin-top:10px;overflow:hidden;font-size:22px;color:aquamarine">{{this.curMachine.warpingProduct2}}</li>
        </div>

        <div class="up" >
          <div
            class="bg-color-black item"
            v-for="item in titleItem1"
            :key="item.title"
          >
            <p class="ml-3 colorBlue fw-b fs-xl" style="font-size: 25px">{{ item.title }}</p>

            <div>
              <dv-digital-flop
                class="dv-dig-flop ml-1 mt-2 pl-3"
                :config="item.number"
              />
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
    import CenterChart from '@/components/echart/center/centerChartRate'

    export default {
        props:{
            curMachine:{
                type: Object
            }
        },

        data() {
            return {
                titleItem:   [

                ],
              titleItem1:   [

              ],
                ranking: {},
                water: {
                    data: [10,20,30],
                    shape: 'roundRect',
                    formatter: '{value}%',
                    waveNum: 3
                },

            }
        },
        components: {
            CenterChart
        },
        watch:{
            curMachine:{
                handler(curMachine, oldVal){
                    this.updateData()

                }
            }
        },
        created(){
            this.updateData()
        },
        methods:{
            updateData(){
                this.ranking = {
                    data: [
                        {
                            name: '压浆力低压',
                            value: this.curMachine.pressLow
                        },
                        {
                            name: '压浆力高压',
                            value: this.curMachine.pressHigh
                        },
                        {
                            name: '压浆力1速',
                            value: this.curMachine.pressSpeed1
                        },
                        {
                            name: '压浆力2速',
                            value: this.curMachine.pressSpeed2
                        },


                    ],
                        carousel: 'single',
                        unit: '单位'
                },


                this.titleItem = [
                    {
                        title: '车速(r/min)',
                        number: {
                            number: [this.curMachine.warpingSpeed1],
                            toFixed: 1,
                            textAlign: 'right',
                            content: '{nt}',
                            style: {
                                fontSize: 30,
                            }
                        }
                    },
                    {
                        title: '断头率(%)',
                        number: {
                            number: [this.curMachine.warpingBreakrate1],
                            toFixed: 1,
                            textAlign: 'right',
                            content: '{nt}',
                            style: {
                                fontSize: 30
                            }
                        }
                    },

                ]

              this.titleItem1 = [
                {
                  title: '车速(r/min)',
                  number: {
                    number: [this.curMachine.warpingSpeed2],
                    toFixed: 1,
                    textAlign: 'right',
                    content: '{nt}',
                    style: {
                      fontSize: 30,
                    }
                  }
                },
                {
                  title: '断头率(%)',
                  number: {
                    number: [this.curMachine.warpingBreakrate2],
                    toFixed: 1,
                    textAlign: 'right',
                    content: '{nt}',
                    style: {
                      fontSize: 30
                    }
                  }
                },

              ]

            },

        }
    }
</script>

<style lang="scss">
  @import '../../assets/scss/index.scss';

  #center {
    display: flex;
    flex-direction: column;

    .up {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;


      .item {
        border-radius: 6px;
        padding-top: 8px;
        margin-top: 8px;
        width: 48%;
        height: 80px;

      .bg-color-black {
        height: 300px;
        border-radius: 10px;
      }

      .dv-dec-1 {
        position: relative;
        width: 100px;
        height: 20px;
        top: -3px;
      }

        .dv-dig-flop {
          width: 150px;
          height: 30px;
        }
      }
    }

    .down {
      padding: 6px 4px;
      padding-bottom: 0;
      width: 100%;
      display: flex;
      height: 255px;
      justify-content: space-between;

      .bg-color-black {
        border-radius: 5px;
      }

      .ranking {
        padding: 10px;
        width: 59%;

        .dv-scr-rank-board {
          height: 225px;
        }
      }

      .percent {
        width: 40%;
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 50%;
          height: 120px;

          span {
            margin-top: 8px;
            font-size: 14px;
            display: flex;
            justify-content: center;
          }
        }

        .water {
          width: 100%;

          .dv-wa-le-po {
            height: 95%;
          }
        }
      }
    }
  }
</style>
